<template>
  <div @click="onChat" class="main">
    <div class="shop-info">
      <div class="shop-head">
        <VanImg fit="fill" width="100%" height="100%" :src="msg.head"></VanImg>
      </div>
      <div class="shop-tag">
        <span class="shop-name">{{msg.name}}</span>
        <span class="shop-msg">{{msg.content}}</span>
      </div>
    </div>
    <div class="shop-date">
      {{msg.date| showDate}}
    </div>
  </div>
</template>

<script>
import {Image as VanImg} from 'vant'

export default {
  name: 'BriefMsg',
  components: {
    VanImg
  },
  props: {
    msg: Object
  },
  methods: {
    onChat () {
      this.$router.push({name: 'Chat', params: {id: this.msg.id, name: this.msg.name}})
    }
  },
  filters: {
    showDate (val) {
      let now = new Date()
      let dateMsg = new Date(val)
      if (now.setHours(0, 0, 0, 0) === dateMsg.setHours(0, 0, 0, 0)) {
        return '今天'
      } else {
        return '以前'
      }
    }

  }
}
</script>

<style scoped lang="less">

  .main {
    display: flex;
    justify-content: space-between;
    padding-left: 0.1rem;
    height: 1.2rem;
    background-color: white;

    .shop-info {
      display: flex;
      margin: 0.1rem 0.1rem 0.1rem 0;
      width: calc(~"100% - 1rem");

      .shop-head {
        flex-shrink: 0;
        height: 1rem;
        width: 1rem;
        margin-right: 0.2rem;
        border-radius: 50%;
        overflow: hidden;
      }

      .shop-tag {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-width: 0;

        .shop-name {
          color: black;
        }

        .shop-msg {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          color: lightgrey;
        }

      }
    }

    .shop-date {
      flex: 1;
      margin: 0.1rem 0;
      color: lightgrey;
    }
  }

</style>
